<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ tool.name }}</title>

    <link rel="shortcut icon" href="/static/bitbug_favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/201609131540/css/checked.min.css">
    <style>
        .normal_dta {
            color: gray;
        }

        .edit_css {
            display: none;
            margin-left: 250px;
            margin-top: 10px;
        }

        .box::before {
            content: '';
            border-radius: 3px;
            position: absolute;
            width: 380px;
            height: 38px;
            z-index: -1;
            background-image: linear-gradient(50deg, aquamarine, cornflowerblue, goldenrod, #6472ba, salmon, lightgreen, sandybrown, violet);
            background-size: 300%;
            animation: animate_bg 4s infinite;
        }

        @keyframes animate_bg {
            0%, 100% {
                background-position: 0%, 50%;
            }
            50% {
                background-position: 100%, 50%;
            }
        }

        .s1 {
            font-size: large;
            display: -moz-inline-box;
            display: inline-block;
            width: 100px;
        }

        .s_text {
            min-width: 500px;
            height: 35px;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid red;
        {#background-color: #90cba0;#}
        }

        .s_radio {
            margin-right: 20px;
        }

        .s_check_box {
            margin-right: 20px;
        }

        .s_select {
            height: 30px;
            min-width: 250px;
            padding-left: 10px;
            border-radius: 4px;
        {#border: 0;#} background-color: #f8eef6;
        }

        .edit_btn {
            border: 1px solid black;
            float: right;
            margin-left: 2px;
            font-size: large;
            border-radius: 4px;

        }

        textarea {
            border: 1px solid gray;
        }

        .step_edit_div {
            z-index: 900;
        {# 动态计算宽度 #} width: -webkit-calc(100% - 200px);

            background: linear-gradient(to bottom, #5da6d2, #a9b8c1);
            height: 94%;
            position: fixed;
            top: 50px;
        {#left: 240px;#}{#             隐藏的时候是99% ， 显示的时候是240px #} left:99%;

            padding: 10px;
            box-shadow: -4px 4px 6px darkgray;
        }

        .step_tool {
            width: 49%;
            height: 100%;
            background-color: white;
            border-radius: 4px;
            padding: 5px;

        }

        .tool_textarea {
            width: 100%;
            border: 1px solid #5da6d2;
            margin-top: 2px
        }
    </style>
</head>
<body>
{% include 'menu.html' %}
{#<h1>{{ tool.owner }}</h1>#}

{# 步骤列表 #}
<div style="z-index: 900;width: 200px;height: 100%;background: linear-gradient(to bottom,#5da6d2,#a9b8c1);position: fixed;left: 0;top:50px;padding: 10px;
            box-shadow: 4px 4px 6px darkgray;overflow-y: auto">
    <button id="run_btn" onclick="run()" class="btn"
            style="font-size: large;height: 40px;width: 100%;color: #5668e3;background-color: white">开始构造
    </button>
    <br>
    <br><textarea name="" id="res_txt" style="width: 100%;background-color: #f6f6f6" rows="7"
                  placeholder="构造结果如下:"></textarea>
    <div id="edit_1_step_list" name="edit_1" style="display: none">
        <h5 style="color: #0b0c0c">房源步骤列表： <a href="/add_DIY_step/{{ tool.id }}/"><span
                style="font-size: xx-small;color: gray">点此增加步骤</span></a></h5>
        {% for i in steps %}
            {{ i.order }} : <a href="#" onclick="open_step_edit_div('{{ i.id }}')">{{ i.name }}</a><br>

        {% endfor %}
    </div>
</div>

{#    按钮组--编辑者模式#}
{# 添加按钮 #}
<div name="edit_1" style=" position: fixed;bottom: 0px;left:37%; margin-left: 0px; text-align: center;display: none">
    <div class="box">
        <div class="btn-group" style="margin: 2px">
            <button type="button" onclick="add_input('text')" class="btn btn-default" style="margin-right: 3px">添加输入框
            </button>
            <button type="button" onclick="add_input('radio')" class="btn btn-default" style="margin-right: 3px">添加单选
            </button>
            <button type="button" onclick="add_input('checkbox')" class="btn btn-default" style="margin-right: 3px">
                添加多选
            </button>
            <button type="button" onclick="add_input('select')" class="btn btn-default">添加下拉列表</button>
        </div>
    </div>
</div>


{# 工具标题 #}
<div name="edit_0" class="edit_css">
    <h3 style="">{{ tool.name }}</h3>
    <h5 style="color: gray;">{{ tool.des }}</h5>
</div>
<div name="edit_1" class="edit_css">
    工具标题：<input id="tool_name" type="text" style="width: 200px;height: 35px" value="{{ tool.name }}"> &#12288;
    工具描述：<input id="tool_des" type="text" style="width:400px;height: 35px" value="{{ tool.des }}"> &#12288;
    <button class="btn" onclick="save_NameAndDes()">保存</button>
</div>

{# 普通模式-具体输入展示 #}
<div name="edit_0" class="edit_css" id="edit_0_inputs">

</div>

{# 编辑模式-具体输入展示 #}
<div name="edit_1" class="edit_css" id="edit_1_inputs" style="margin-bottom: 50px">
</div>




{# 显示所有输入， 可以实现局部刷新效果#}
{#  par_name  打破了很多设计难点  #}
<script>
    function show_all_inputs() {
        $.get('/get_DIY_tools_all_inputs/', {
            "tool_id": '{{ tool.id }}'
        }, function (ret) {
            var all_inputs = ret.all_inputs
            if ('{{ edit }}' == '0') {
                // 普通使用模式的
                console.log('进入使用模式')
                var edit_0_inputs = document.getElementById('edit_0_inputs')
                //清空旧的
                edit_0_inputs.innerHTML = ''
                //展示最新的
                for (var i = 0; i < all_inputs.length; i++) {
                    edit_0_inputs.appendChild(document.createElement('br'))
                    var s1 = document.createElement('span')
                    s1.innerText = all_inputs[i].des + ' : ';
                    s1.className = 's1'
                    if (all_inputs[i].type == 'text') {
                        // 展示一个text普通输入框
                        if (all_inputs[i].need_user == true) {
                            s1.style.color = '#d20d34'
                        }
                        var s2 = document.createElement('input')
                        s2.className = 's_text'

                        // 通过编辑者设置的变量名  动态设置了输入框的id，执行构造的时候可以通过id 直接获取input所有输入的值，还不用担心id重复问题！！！！
                        s2.id = all_inputs[i].par_name

                        s2.value = all_inputs[i].default_value
                        s2.placeholder = all_inputs[i].help_text
                        edit_0_inputs.appendChild(s1)
                        edit_0_inputs.appendChild(s2)
                        edit_0_inputs.appendChild(document.createElement('br'))
                    } else if (all_inputs[i].type == 'radio') {
                        // 展示一个单选
                        edit_0_inputs.appendChild(s1)
                        for (var si = 0; si < all_inputs[i].data.length; si++) {
                            var l = document.createElement('label')
                            l.className = 's_radio'
                            var s2 = document.createElement('input')
                            s2.type = 'radio'
                            s2.value = all_inputs[i].data[si].value

                            // 通过编辑者设置的变量名  动态设置了单选多选的name，执行构造的时候可以通过name 获取值，还不用担心name重复问题！！！！
                            s2.name = all_inputs[i].par_name

                            if (all_inputs[i].data[si].chose == true) {
                                s2.checked = 'checked'
                            }
                            l.innerText = all_inputs[i].data[si].des + ' '
                            l.appendChild(s2)
                            edit_0_inputs.appendChild(l)
                        }
                        edit_0_inputs.appendChild(document.createElement('br'))
                    } else if (all_inputs[i].type == 'checkbox') {
                        // 展示一个多选
                        edit_0_inputs.appendChild(s1)
                        for (var si = 0; si < all_inputs[i].data.length; si++) {
                            var l = document.createElement('label')
                            l.className = 's_check_box'
                            var s2 = document.createElement('input')
                            s2.type = 'checkbox'
                            s2.value = all_inputs[i].data[si].value
                            s2.name = all_inputs[i].par_name
                            if (all_inputs[i].data[si].chose == true) {
                                s2.checked = 'checked'
                            }
                            l.innerText = all_inputs[i].data[si].des + ' '
                            l.appendChild(s2)
                            edit_0_inputs.appendChild(l)
                        }
                        edit_0_inputs.appendChild(document.createElement('br'))

                    } else if (all_inputs[i].type == 'select') {
                        // 展示一个下拉框
                        edit_0_inputs.appendChild(s1)
                        var se = document.createElement('select')
                        se.className = 's_select'

                        // 通过编辑者设置的变量名  动态设置了下拉框的id，执行构造的时候可以通过id 直接获取select选择的值，还不用担心id重复问题！！！！
                        se.id = all_inputs[i].par_name

                        for (var si = 0; si < all_inputs[i].data.length; si++) {
                            var op = document.createElement('option')
                            op.value = all_inputs[i].data[si].value
                            op.innerText = all_inputs[i].data[si].des
                            se.appendChild(op)
                            if (all_inputs[i].data[si].chose == true) {
                                op.selected = 'selected'
                            }
                        }
                        edit_0_inputs.appendChild(se)
                        edit_0_inputs.appendChild(document.createElement('br'))
                    } else {
                        alert('数据错误')
                    }

                }
            } else {
                // 用编辑模式
                console.log('进入编辑模式')
                var edit_1_inputs = document.getElementById('edit_1_inputs')
                //清空旧的
                edit_1_inputs.innerHTML = ''
                //展示最新
                for (var i = 0; i < all_inputs.length; i++) {
                    edit_1_inputs.appendChild(document.createElement('br'))
                    edit_1_inputs.appendChild(document.createElement('br'))
                    var s1_edit = document.createElement('span')
                    s1_edit.innerText = all_inputs[i].type + "类型---" + "变量名：" + all_inputs[i].par_name + '    '
                    s1_edit.style.color = '#3761a4'
                    var s2_edit = document.createElement('textarea')
                    s2_edit.style = "work-break:break-all;"
                    // word- wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，
                    // 如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一 行，而不会把单词截断掉的。
                    s2_edit.value = JSON.stringify(all_inputs[i]) // all_inputs 是json字符串传递过来的
                    s2_edit.style.width = '100%'
                    s2_edit.style.height = '80px'
                    s2_edit.wrap = 'hard'

                    s2_edit.id = 's2_input_' + i.toString() // 用来保存输入

                    var s3_edit = document.createElement('button')
                    s3_edit.innerText = '保存'
                    s3_edit.style.color = 'green'
                    s3_edit.className = 'edit_btn'
                    //  设置一个新的属性来标记列表中的序号，主要是为了储存起来给函数用来传递给后台去对all_inputs 进行更新和 删除。
                    // 为什么不直接用 i ， 因为生成元素的onclick函数是最后才生成的，所以最后生成的每个按钮的函数传递的i 都是最后一个
                    s3_edit.wqhs = i.toString()
                    s3_edit.onclick = function () {
                        save_input(this.wqhs)
                    }
                    var s4_edit = document.createElement('button')
                    s4_edit.innerText = '删除'
                    s4_edit.style.color = 'red'
                    s4_edit.className = 'edit_btn'
                    s4_edit.style.marginRight = '20px'
                    s4_edit.wqhs = i.toString()
                    s4_edit.onclick = function () {
                        del_input(this.wqhs)
                    }
                    edit_1_inputs.appendChild(s1_edit)
                    edit_1_inputs.appendChild(s4_edit)
                    edit_1_inputs.appendChild(s3_edit)
                    edit_1_inputs.appendChild(document.createElement('br'))
                    edit_1_inputs.appendChild(s2_edit)
                }
            }
        })
    }

    show_all_inputs()
</script>

{# 自定义工具的函数 发送请求、保存等#}
<script>
    // 为了防止输入完所有的内容忘记保存，改为每个小部分加一个保存按钮
    function save_NameAndDes() {
        $.get("/DIY_tools_save_NameAndDes/", {
                "tool_name": $("#tool_name").val(),
                "tool_des": $("#tool_des").val(),
                "tool_id": '{{ tool.id }}'
            },
            function (ret) {

                alert("保存成功")
            })
    }

    // 添加输入元素
    function add_input(which) {
        $.get("/DIY_tools_add_input/", {
            "tool_id": '{{ tool.id }}',
            "which": which
        }, function (ret) {
            document.location.reload()

        })
    }

    // 编辑者保存设置
    function save_input(input_index) {
        // 获取动态id的 输入框的value  ！！！！
        var s2_input = document.getElementById("s2_input_" + input_index.toString()).value
        // alert(s2_input)
        $.get("/DIY_tools_save_input/", {
            "tool_id": '{{ tool.id }}',
            "input_index": input_index,
            "s2_input": s2_input
        }, function (ret) {
            show_all_inputs()
        })


    }

    // 编辑者删除添加输入
    function del_input(input_index) {
        $.get("/DIY_tools_del_input/", {
            "tool_id": '{{ tool.id }}',
            "input_index": input_index
        }, function (ret) {
            // document.location.reload();   刷新页面体验不好，改为调用渲染all_inputs 函数
            show_all_inputs()
        })
    }
</script>


{# 步骤工具   模块#}
<div name="edit_1"  id="step_edit_div" class="step_edit_div">
    <div id="left_step" style="float: left;overflow-y: auto;" class="step_tool">
        <form name="step_form" id="step_form" role="form" action="" method="post">
            <div style="position: fixed;border-radius: 5px;z-index: 920">
                <button type="submit" class="btn btn-success">保存</button>
                <button type="button" onclick="javascript:$('#step_edit_div').animate({left:'99%'},'fast')"
                        class="btn btn-default">取消
                </button>
                <button type="button" id="del_step_btn" onclick="" class="btn btn-danger">删除</button>
            </div>
            <br><br>
            {% include 'DIY_tools/diy_tool_step_edit.html' %}
        </form>
    </div>

    <div id="right_tool" class="step_tool" style="float: right;overflow-y: auto">
        {#        调试工具#}
        <a href="/DIY_tools_del_log/{{ step.id }}/">清空日志</a>
        <textarea name="" id="diy_log" rows="7" class="form-control" readonly>【 日志 】 上次执行详细信息如下：</textarea>
        <textarea name="" id="variable_log" rows="8" class="form-control" readonly
                  style="margin-top: 5px">【 变量 】 目前已声明的变量名如下：</textarea>

        <div class="panel-group" id="panel-0">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="panel-title" data-toggle="collapse" data-parent="#panel-0"
                       href="#panel-element-1">正则检查</a>
                </div>
                {#                     展开效果为在class 里面再加个 in #}
                <div id="panel-element-1" class="panel-collapse collapse ">
                    <div class="panel-body">
                        <a href="#" onclick="tool_recheck_play()">运行</a>
                        <a href="#" onclick="alert('输入正则表达式和原始字符串后，点击运行按钮即可')">帮助</a>
                        <textarea name="" id="tool_recheck_old" rows="2" class="tool_textarea" placeholder="原始字符串"></textarea>
                        <textarea name="" id="tool_recheck_exp" rows="1" class="tool_textarea" placeholder="正则表达式"></textarea>
                        <textarea name="" id="tool_recheck_res" rows="1" class="tool_textarea" placeholder="提取结果"></textarea>
                    </div>
                </div>
                <script>
                    function tool_recheck_play() {
                        $.get("/DIY_tools_tool/tool_recheck_play/", {
                            "tool_recheck_old": $("#tool_recheck_old").val(),
                            "tool_recheck_exp" : $("#tool_recheck_exp").val()
                        },function (ret) {
                            $("#tool_recheck_res").val(ret)
                        })
                    }

                </script>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="panel-title" data-toggle="collapse" data-parent="#panel-330698" href="#panel-element-2">新旧json比对</a>
                </div>
                <div id="panel-element-2" class="panel-collapse collapse">
                    <div class="panel-body">
                        <a href="#" onclick="tool_diff_play()">运行</a>
                        <a href="#" onclick="alert('输入新旧json，点击运行按钮即可')">帮助</a>
                        <textarea name="" id="tool_diff_old" rows="2" class="tool_textarea" placeholder="旧json"></textarea>
                        <textarea name="" id="tool_diff_new" rows="2" class="tool_textarea" placeholder="新json"></textarea>
                        <textarea name="" id="tool_diff_res" rows="5" class="tool_textarea" placeholder="对比结果"></textarea>
                    </div>
                </div>
                <script>
                      function tool_diff_play() {
                            $.get("/DIY_tools_tool/tool_diff_play/", {
                                "tool_diff_old": $("#tool_diff_old").val(),
                                "tool_diff_new":$("#tool_diff_new").val(),
                            }, function (ret) {
                                $("#tool_diff_res").val(ret);
                            })
                    }
                </script>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="panel-title" data-toggle="collapse" data-parent="#panel-330698"
                       href="#panel-element-3">草纸</a>
                </div>
                <div id="panel-element-3" class="panel-collapse collapse">
                    <div class="panel-body">
                        草稿纸
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{#  步骤工具模块所有函数 #}
<script>
    function open_step_edit_div(step_id) {
        // 移走
        $('#step_edit_div').animate({left: '99%'}, 'fast')
        // 清空数据
        document.getElementById('step_form').reset()
        // 给表单设置好请求路由action
        document.getElementById('step_form').action = '/DIY_tools_save_step/' + step_id + '/'
        // 回来
        $('#step_edit_div').animate({left: '240px'}, 'fast')
        // 填充新数据
        $.get('/DIY_tools_get_step/', {
            'step_id': step_id
        }, function (ret) {
            // 填充
            // console.log(ret)
            show_step(ret)
        })
        // 给删除按钮指定onclick
        document.getElementById('del_step_btn').onclick = function () {
            // 跳转指定路由
            document.location.href = '/del_DIY_step/' + step_id + '/'
        }
        // 展示日志
        $.get('/DIY_tools_get_log/', {
            'step_id': step_id
        }, function (ret) {
            $('#diy_log').val(ret)
        })
        // 展示当前步骤可用变量
        $.get('/DIY_tools_get_variable_log/', {
            "step_id": step_id
        }, function (ret) {
            $('#variable_log').val(ret)
        })
    }
</script>


{# 自动判断当前进入页面是 编辑模式 还是 用户模式 ，在后端进入页面先判断进入页面的userId 是否与 自定义工具的所属者id 一致， 额外返回一个edit字段，前端js通过edit判断模式展示页面#}
<script>
    // 0 代表编辑模式， 1代表使用模式
    if ('{{ edit }}' == 1) {
        // 进入编辑者模式
        // alert("编辑者模式");
        {#$("#edit_0_step_list").show();#}
        {#$("#edit_0_NameAndDes").show();#}
        {#$("#edit_0_AddButton").show();#}

        {#  改造为name为edit_0 的部分为编辑者元素      #}
        document.getElementById("run_btn").disabled = "disabled"
        var e1 = document.getElementsByName('edit_1');
        for (var i = 0; i < e1.length; i++) {
            e1[i].style.display = 'block'
        }
    } else {
        // 进入使用者模式
        // ealert("使用者模式");
        // $("#edit_1_NameAndDes").show()sss
        {#  改造为name为edit_0 的部分为编辑者元素      #}
                document.getElementById("run_btn").disabled = ""
        var e0 = document.getElementsByName('edit_0');
        for (var i = 0; i < e0.length; i++) {
            e0[i].style.display = 'block'
        }
    }
</script>

{# 一键切换模式 #}
<a href="/change_DIY_model/{{ tool.id }}/"><button class="btn" style="position: fixed;bottom: 0;right: 20px;background-color: #53caaf">切换模式</button></a>


{# 开始构造#}
<script>
    function run() {

        document.getElementById('run_btn').innerText = '构造中...'

        // 收集页面所有数据 （自定义工具的输入框设置的id 就是我们生成的变量名， 所以可以在进入自定义页面的时候 带上数据的时候 加上par_name）

        var all_inputs = JSON.parse('{{ all_inputs|safe }}');
       // console.log(all_inputs);   (4) [{…}, {…}, {…}, {…}]
//  0: {type: "text", des: "用户手机号", need_user: true, default_value: "", help_text: "请在此输入手机号", …}
// 1: {type: "radio", des: "性别", data: Array(2), par_name: "xb"}
//  2: {type: "checkbox", des: "工具", data: Array(2), par_name: "gj"}
// 3: {type: "select", des: "想啥", data: Array(2), par_name: "xs"}

        var user_data = {}
        for (var i in all_inputs){
            // i是下标
            if(all_inputs[i].type == 'text'){
                user_data[all_inputs[i].par_name] = $("#" + all_inputs[i].par_name).val();
            }else if(all_inputs[i].type == 'radio'){
                user_data[all_inputs[i].par_name] = $('input:radio[name="' + all_inputs[i].par_name + '"]:checked').val()
            }else if(all_inputs[i].type == 'checkbox'){
                var s = [];
                var check_list = document.getElementsByName(all_inputs[i].par_name)
                for(var j=0;j<check_list.length;j++){
                    if(check_list[j].checked){
                        s.push(check_list[j].value)
                    }
                }

            user_data[all_inputs[i].par_name] = s
            }else if(all_inputs[i].type == 'select'){
                user_data[all_inputs[i].par_name] = $("#" + all_inputs[i].par_name).val();
            }

        }
        console.log("自定义工具所有的输入数据为：" + user_data)
        console.log(user_data)


        // 向后台发送构造请求
        $.get("/DIY_tools_run/", {
            "tool_id":'{{ tool.id }}',
            "user_data": JSON.stringify(user_data),
        }, function (ret) {

            document.getElementById('res_txt').value = JSON.stringify(ret)

            document.getElementById('run_btn').innerText = '构造完成'
        })


    }
</script>

</body>
</html>
